<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<link rel="stylesheet" href="css/contianer.css" />
		<link rel="stylesheet" href="css/box.css" />
		<style>
			/* 尺寸问题：屏幕宽高比不一样，限定一个宽高范围
			 min-width属性：最小宽度【√】         min-height属性：最大高度
			 max-width属性：最大宽度 【√】        max-height属性：最大高度
			 */
			/* div{
				 width: 80%; /* 默认宽度 */
				 min-width: 500px;
				 max-width: 800px;      /*页面尺寸：最小是500px，，最大是800px，，默认是80%*/
				height: 300px;  /*内容最小宽度是500px，不能改变*/
				/* 定好最小跟最大的宽高，pc：80%  300px
				                    移动：500~600宽度【页面不变】    300px
									自适应
									*/
				background: #ff5500;
			} */
			/**
			 * html结构       外层div----.container      内层div---.box       写lorem
			 * css结构   .container样式：背景颜色#f0f0f0
			 *                          padding：20px；
			 *                         文本居中
			 *          .box样式：背景颜色#4caf50
			 *                    文字改成白色
			 *                    宽度：60%
			 *                    设置最大最小范围500~600官渡【页面不变】
			 *                     margin：auto；
			 */
		</style>
	</head>
	<body>
	<!-- 	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quae nesciunt molestiae ea quam laborum tempore ipsam corrupti tenetur. Rerum, repellat. Exercitationem corrupti nemo ab quidem ducimus consectetur iste beatae!</div> -->
	<div class="container">
		<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sint accusamus est ab placeat eveniet laboriosam itaque distinctio deleniti quibusdam dicta nobis maiores, aliquam adipisci quasi, iste alias repellendus expedita?</div>
	</div>
	</body>
</html>